<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title>分类列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="../css/admin/font.css">
  <link rel="stylesheet" href="../css/admin/xadmin.css">
  <script type="text/javascript" src="../js/jquery-3.2.1/jquery-3.2.1.min.js"></script>
  <script src="../js/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="../js/xadmin.js"></script>
  <script type="text/javascript" src="../js/checkAdmin.js"></script>
</head>

<body>
  
  <div class="x-nav">
    <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a href="">演示</a>
      <a>
        <cite>导航元素</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
      onclick="location.reload()" title="刷新">
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
  </div>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-body ">
            <form class="layui-form layui-col-space5">
              <div class="layui-input-inline layui-show-xs-block">
                <input class="layui-input" id="cate" placeholder="分类名" name="cate_name"></div>
              <div class="layui-input-inline layui-show-xs-block">
                <div class="layui-btn" lay-submit="" id="add" lay-filter="sreach"><i
                    class="layui-icon"></i>增加</div>
              </div>
            </form>
            <hr>
          </div>
          <!-- 表格 -->
          <table class="layui-table layui-form" lay-filter="test" id="tab"></table>

        </div>
      </div>
    </div>
  </div>

  <!-- 操作按钮 -->
  <script type="text/html" id="barDemo">
    <button class="layui-btn-danger layui-btn layui-btn-xs" id="del" lay-event="del" href="javascript:;">
      <i class="layui-icon">&#xe640;</i>删除</button>
  </script>

</body>
<script>
  layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
    var laydate = layui.laydate //日期
      , laypage = layui.laypage //分页
      , layer = layui.layer //弹层
      , table = layui.table //表格
      , carousel = layui.carousel //轮播
      , upload = layui.upload //上传
      , element = layui.element //元素操作
      , slider = layui.slider //滑块
      , $ = layui.jquery
      , form = layui.form; // 表单

      var index = layer.load(2, {shade: false,});

    // 表格渲染
    table.render({
      elem: '#tab'
      , id: 'tableId'
      , url: "http://127.0.0.1:8001/after/type/showAll"
      , method: 'post'
      , limit: 10 //每页默认显示的数量
      , limits: [10, 20, 30, 40, 50, 60, 70, 80, 90]
      , response: { statusCode: 200 } //重新规定成功的状态码为 200，table 组件默认为 0
      , page: true //开启分页
      , cellMinWidth: 10 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      , skin: 'line' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
      , cols: [[
        { field: 'tId', title: 'ID', align: 'center', templet: '' }  //templet:自定义模板,可以用作处理后台的数据再进行展示
        , { field: 'cate', title: '分类', align: 'center', templet: '' }
        , { fixed: 'right', title: '操作', align: 'center', width: 270, toolbar: '#barDemo' }
      ]]
      , done: function (res, curr, count) {
        layer.close(index)
      }
    });

    //监听table中的工具栏,tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    table.on('tool(test)', function (obj) {
      // 获取当前行
      var data = obj.data;
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象

      // 判断操作  使用lay-event
      switch (obj.event) {
        case 'del':
          //发异步删除分类
          $.ajax({
            url: "http://127.0.0.1:8001/after/type/deleteById"
            , type: "post"
            , data: { 'tId': data.tId }
            , success: function (datas) {
              if (datas.data != null) {
                layer.alert('删除成功', { icon: 6 }
                  , function () {
                    window.location.reload();
                  });
                return false;
              }
              layer.msg('操作失败', { time: 1000 });
              return false;
            }
          });
          break;
      }
    });

    $('#add').on('click', function () {
      if ($('#cate').val() != null && $('#cate').val() != "") {
        $.ajax({
          url: "http://127.0.0.1:8001/after/type/addType"
          , type: "post"
          , data: { "cate": $('#cate').val() }
          , success: function (datas) {
            if (datas.data != null) {
              layer.alert(datas.msg
                , { icon: 6 }
                , function () {
                  window.location.reload();
                });
              return false;
            }
            layer.msg('操作失败', { time: 1000 });
            return false;
          }
        });
      }
    });


  });



</script>

</html>